<%--
  Created by IntelliJ IDEA.
  User: 13142
  Date: 2024/3/14
  Time: 19:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--引入vue的js--%>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<%--引入element的js--%>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<%--引入elementui的样式--%>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="js/axios.min.js"></script>
<style>
    #main{
        width: 800px;
        height: 800px;
        margin: auto;
    }
</style>
<html>
<head>
    <title></title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="js/echarts.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main"  >

</div>
<script type="text/javascript">

    let main = new Vue({
        el: " #main",
        created() {
            this.vertical()
        },
        methods: {
            vertical() {
                axios.get("/dept/tu").then(result=>{
                    console.log(result)
                    var myChart = echarts.init(document.getElementById('main'));
                    // 指定图表的配置项和数据
                    option = {
                        legend: {
                            top: 'bottom'
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: false},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        series: [
                            {
                                name: 'Nightingale Chart',
                                type: 'pie',
                                radius: [50, 250],
                                center: ['50%', '50%'],
                                roseType: 'area',
                                itemStyle: {
                                    borderRadius: 8
                                },
                                data:
                                result.data


                            }
                        ]
                    };
                    option && myChart.setOption(option);
                })

            }
        }
    })


</script>
</body>
</html>
